<template>
    <div class="page">
        <div class="page-content">
            <section class="latest" ref="latest" v-if="this.user.borrowStatus=='Y'">
                <h2 class="status">未还款</h2>
                <div class="main">
                    <div class="left">
                        <img src="/static/img/record@3x.png">
                    </div>
                    <div class="center">
                        <p class="text">未还款金额</p>
                        <p class="money">￥
                            <span>{{order.surplusRepayAmt}}</span>
                        </p>
                        <p class="text">应还款金额</p>
                        <p class="money new_money">￥
                            <span class="new_color">{{order.repayAmt}}</span>
                        </p>
                    </div>
                    <div class="right">
                        <p class="info">借款金额
                            <span class="money">￥{{order.borrowAmt}}</span>
                        </p>
                        <p class="info">到账金额
                            <span class="money">￥{{order.arrivalAmt}}</span>
                        </p>
                        <p class="info">借款日期
                            <span class="date">{{order.orderDate}}</span>
                        </p>
                        <p class="info">还款日期
                            <span class="date">{{order.repayDate}}</span>
                        </p>
                        <p class="privilege">
                            <span :class="{used:orderReding}">
                                <img :src="orderReding?imgs.circleOk:imgs.circleDel" alt="">红包</span>
                            <span :class="{used:orderCouponing}">
                                <img :src="orderCouponing?imgs.circleOk:imgs.circleDel" alt="">免息券</span>
                        </p>
                    </div>
                </div>
            </section>
            <section class="list" ref="ordersScroller">
                <h3 class="bill_nums">历史账单，共{{count}}笔</h3>
                <scroll :on-refresh="reLoadOrders" :on-infinite="loadMoreOrders" ref="records" :class="[refreshing||noMoreOrders?'noMoreLoading':'']">
                    <ul v-if="orders&&orders.length>0" v-for="od,i in orders">
                        <li class="bill" :class="{open:od.open}">
                            <div class="breif">
                                <div class="num">
                                    <span class="money">
                                        <i></i>{{od.repayAmt|fixedFilt}}</span>
                                    <span class="date">{{od.showStatus == 'D' ? od.actualRepayDate : od.repayDate}}</span>
                                </div>
                                <img v-if="od.protocolUrl" class="xieyi" src="static/img/agreement@3x.png" @click="examineProtocol(od.protocolUrl)" />
                                <div class="status">
                                    {{od.showStatus|showStatusFilt}}
                                    <i @click="toogleDetail(i)"></i>
                                </div>
                            </div>
                            <b-divide class="divide"></b-divide>
                            <div class="detail" :class="{actualRepayed:od.actualRepayDate}">
                                <p>
                                    <span>借款金额</span>
                                    <span>￥{{od.borrowAmt}}</span>
                                    <span>借款日期</span>
                                    <span>{{od.orderDate}}</span>
                                    <span class="icon" :class="[od.redId?'used':'']">
                                        <i></i>红包</span>
                                </p>
                                <p>
                                    <span>到账金额</span>
                                    <span>￥{{od.arrivalAmt}}</span>
                                    <span>应还款日期</span>
                                    <span>{{od.repayDate}}</span>
                                    <span class="icon" :class="[od.couponId?'used':'']">
                                        <i></i>免息券</span>
                                </p>
                                <p v-if="od.actualRepayDate">
                                    <span>还款金额</span>
                                    <span>￥{{od.repayAmt}}</span>
                                    <span>实际还款日</span>
                                    <span>{{od.actualRepayDate}}</span>
                                    <!--该元素是用来站位，保证前面内容对齐-->
                                    <span style="opacity:0" class="icon" :class="[i == 2?'used':'']">
                                        <i></i>免息券</span>
                                </p>
                            </div>
                        </li>
                    </ul>
                    <div class="empty" v-if="noMoreOrders&&orders.length==0">
                        <img src="static/img/empty@3x.png" />
                    </div>
                </scroll>
            </section>
        </div>
    </div>
</template>
<script src="./LoanRecord.js"></script>
<style lang="scss" scoped src="./LoanRecord.scss"></style>